<template>
  <div>
    <div class="cd-popup" role="alert">
      <div class="cd-popup-container">
        <p>{{ recognitionResult }}</p>
        <div>
          <input type="checkbox" id="speaker"></input>
          <label @click.stop="opck" for="speaker" class="background">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50px" height="50px"
              viewBox="0 0 475.085 475.085" xml:space="preserve" class="microphone">
              <g>
                <g>
                  <path d="M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365
			c0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84
			c-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525
			C190.906,319.951,212.416,328.897,237.541,328.897z" />
                  <path d="M396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426
			c-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545
			c-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845
			c-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547
			c0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089
			c-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847
			c3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847
			c0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691
			c41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547
			C401.998,196.049,400.185,191.77,396.563,188.15z" />
                </g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
              <g>
              </g>
            </svg>
            <svg width="100px" height="100px" viewBox="0 0 100 100">
              <circle class="circle" cx="50" cy="50" r="46" />
              <circle class="loader" cx="50" cy="50" r="46" />
            </svg>
            <div class="dotWrapper">
              <div class="dot dot-1"></div>
              <div class="dot dot-2"></div>
              <div class="dot dot-3"></div>
            </div>
          </label>
        </div>
        <a href="javascript:void(0);" class="cd-popup-close img-replace">Close</a>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      recognitionResult: "",
      recognition: null,
    };
  },
  props:{
    keys:{
      type:String,
      default: ""
    }
  },
  mounted() { },
  methods: {
    opck() {
      if (!document.querySelector("#speaker").checked) {
        // 这里是监听语音
        this.recognitionResult = ""
        this.startRecognition();
      } else {
        // 这里是关闭监听并且返回刚才监听的语音
        setTimeout(()=>{
          this.stopRecognition();
        },500)
      }
    },
    startRecognition() {
      this.recognition = new webkitSpeechRecognition() || new SpeechRecognition();
      this.recognition.continuous = true; // 设置为连续识别
      this.recognition.interimResults = true; // 获取实时结果
      this.recognition.lang = 'zh-CN';
      this.recognition.onresult = (event) => {
        for (let i = event.resultIndex; i < event.results.length; ++i) {
          // this.recognitionResult += event.results[i][0].transcript
          if (event.results[i].isFinal) {
            this.recognitionResult += event.results[i][0].transcript;
          }
        }
      };
      this.recognition.onerror = (event) => {
        console.error('语音识别错误:', event.error);
      };
      this.recognition.start();
    },
    stopRecognition() {
      if (this.recognition) {
        if(this.recognitionResult == "") {
          this.$notify({
            title: "提示",
            message: "时间过短",
            type: "warning",
            position: "bottom-right",
          });
        }else {
          this.$emit('recognition',this.recognitionResult)
          this.$notify({
            title: "成功",
            message: `已根据语音追加${this.recognitionResult}`,
            type: "success",
            position: "bottom-right",
          });
        }
        this.recognition.stop();
      }
    },
    ClickPopup() {
      var popup = document.querySelector(".cd-popup");
      popup.classList.add("is-visible");
      this.popupFun();
      document.querySelector("#speaker").checked = false;
      if (!("webkitSpeechRecognition" in window)) {
        alert("对不起，您的浏览器不支持语音识别功能。");
        return;
      }
    },
    popupFun() {
      let this_ = this
      var popup = document.querySelector(".cd-popup");
      popup.addEventListener("click", function (event) {
        var target = event.target;
        if (
          target.classList.contains("cd-popup-close") ||
          target.classList.contains("cd-popup")
        ) {
          if(this_.recognition) {
            this_.recognition.stop();
          }
          event.preventDefault();
          popup.classList.remove("is-visible");
          this_.keydNul()
        }
      });
      document.addEventListener("keyup", function (event) {
        if (event.which == "27") {
          if(this_.recognition) {
            this_.recognition.stop();
          }
          var popup = document.querySelector(".cd-popup");
          popup.classList.remove("is-visible");
        }
      });
    },
    keydNul(){ 
      this.$emit('keyFun',null)
    }
  },
  beforeDestroy(){
    if(this.recognition) {
      this.recognition.stop();
    }
  }
};
</script>

<style lang="scss" scoped>
/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  bottom: 0;
  left: 0;
}

.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #5e6e8d;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.no-touch .cd-nugget-info a:hover {
  opacity: 0.8;
}

.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}

.cd-nugget-info span svg {
  display: block;
}

.cd-nugget-info .cd-nugget-info-arrow {
  fill: #5e6e8d;
}

/* -------------------------------- 

Main components 

-------------------------------- */
header {
  height: 200px;
  line-height: 200px;
  text-align: center;
  background-color: #5e6e8d;
  color: #fff;
}

header h1 {
  font-size: 20px;
  font-size: 1.25rem;
}

/* -------------------------------- 

xpopup 

-------------------------------- */
.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background-color: rgba(94, 110, 141, 0.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  z-index: 99999;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: 4em auto;
  background: rgba(0, 0, 0, 0);
  border-radius: 0.25em 0.25em 0.4em 0.4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-popup-container p {
  padding: 3em 1em;
}

.cd-popup-container .cd-buttons:after {
  content: "";
  display: table;
  clear: both;
}

.cd-popup-container .cd-buttons li {
  float: left;
  width: 50%;
  list-style: none;
}

.cd-popup-container .cd-buttons a {
  display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-popup-container .cd-buttons li:first-child a {
  background: #fc7169;
  border-radius: 0 0 0 0.25em;
}

.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
  background-color: #fc8982;
}

.cd-popup-container .cd-buttons li:last-child a {
  background: #b6bece;
  border-radius: 0 0 0.25em 0;
}

.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
  background-color: #c5ccd8;
}

.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}

.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

@media only screen and (min-width: 1170px) {
  .cd-popup-container {
    margin: 8em auto;
  }
}

.img-replace {
  /* replace text with an image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
}

input {
  display: none;
}

.background {
  position: relative;
  background: linear-gradient(to bottom, #b79cd7 0%, #937baf 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  width: 400px;
  height: 400px;
  cursor: pointer;

  .circle {
    fill: none;
    stroke-width: 3;
    stroke-opacity: 0.5;
  }

  .loader {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0;
    transform-origin: center;
  }

  .microphone {
    position: absolute;
    fill: white;
    height: 40px;
    width: auto;
  }

  .dotWrapper {
    opacity: 0;
    position: absolute;
    width: 50px;
    height: 10px;

    .dot {
      position: absolute;
      border-radius: 50%;
      background-color: white;
      height: 10px;
      width: 10px;
    }

    .dot-1 {
      right: 0;
    }

    .dot-3 {
      right: 20px;
    }
  }
}

input:checked {
  &~.background {
    .loader {
      animation: line 5s linear infinite, spin 10s linear infinite;
      stroke-dasharray: 280;
    }

    .microphone {
      animation: microphone 0.5s ease-in-out both;
    }

    .dotWrapper {
      opacity: 1;
      animation: dots 1s ease-in-out both;

      .dot-1,
      .dot-2,
      .dot-3 {
        animation: dot 1s ease-in-out infinite;
      }

      .dot-2 {
        animation-delay: -0.4s;
      }

      .dot-3 {
        animation-delay: -0.2s;
      }
    }
  }
}

@keyframes line {
  0% {
    stroke-dashoffset: 1120;
  }

  100% {
    stroke-dashoffset: 560;
  }
}

@keyframes spin {
  0% {
    transform: rotate(-90deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(270deg) translate3d(0, 0, 0);
  }
}

@keyframes microphone {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes dots {

  0%,
  50% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes dot {

  0%,
  100% {
    top: 5px;
  }

  50% {
    top: -5px;
  }
}
</style>